<template>
  <div class="p-2">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="使用信息" name="elevatorBaseInfo">
        <elevator-base-info :elevator="elevator" />
      </el-tab-pane>
      <el-tab-pane label="电梯档案" name="elevatorInfo">
        <elevator-info :elevator="elevator" />
      </el-tab-pane>
      <el-tab-pane label="电梯状态" name="elevatorStatus">
        <elevator-status :elevator="elevator" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import ElevatorBaseInfo from "./elevatorBaseInfo.vue";
import ElevatorInfo from "./elevatorInfo.vue";
import { getElevator } from "@/api/iot/elevator";
import ElevatorStatus from "@/views/iot/elevator/elevatorStatus.vue";

const route = useRoute();
const activeName = ref("elevatorBaseInfo");
const elevator = ref({});
onMounted(async () => {
  let res = await getElevator(route.params.elevatorId as string);
  elevator.value = res.data;
});
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
